<template>
    <div class="sales-receipt-container"  style="height: 800px;">
      <!-- 查询条件区域 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="单据日期">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY/MM/DD"
          />
        </el-form-item>
        <el-form-item label="客户类别">
          <el-select v-model="searchForm.customerType" placeholder="请选择">
            <el-option
              v-for="item in customerTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="客户">
          <el-input v-model="searchForm.customer" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="销售人员">
          <el-input v-model="searchForm.salesman" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="销售单号">
          <el-input v-model="searchForm.saleOrderNo" placeholder="请输入单号查询" />
        </el-form-item>
        <el-form-item>
          <el-checkbox-group v-model="searchForm.checkBoxGroup">
            <el-checkbox label="销货" />
            <el-checkbox label="退货" />
            <el-checkbox label="回款率100%不显示" />
            <el-checkbox label="显示小计" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <i class="el-icon-search"></i> 查询
          </el-button>
        </el-form-item>
      </el-form>
  
      <!-- 标题和操作按钮 -->
      <div class="table-header flex justify-between items-center mb-4">
        <h3 class="text-lg font-bold text-gray-800">销售收款一览表</h3>
        <div class="flex space-x-2">
          <el-button type="primary" @click="handleExport">
            <i class="el-icon-download"></i> 导出
          </el-button>
          <el-dropdown @command="handlePrintCommand">
            <el-button>
              <i class="el-icon-printer"></i> 打印<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu>
              <el-dropdown-item command="printCurrent">当前页</el-dropdown-item>
              <el-dropdown-item command="printAll">全部</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
  
      <!-- 数据表格 -->
      <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <el-table
          :data="tableData"
          border
          stripe
          fit
          highlight-current-row
          style="width: 100%"
          show-summary
          :summary-method="getSummary"
        >
          <el-table-column
            prop="customerType"
            label="客户类别"
            min-width="120"
          />
          <el-table-column
            prop="customer"
            label="客户"
            min-width="140"
          />
          <el-table-column
            prop="customerAddress"
            label="客户地址"
            min-width="180"
          />
          <el-table-column
            prop="salesman"
            label="销售员"
            min-width="100"
          />
          <el-table-column
            prop="businessType"
            label="业务类别"
            min-width="100"
          />
          <el-table-column
            prop="receiptDate"
            label="单据日期"
            min-width="120"
          />
          <el-table-column
            prop="receiptNo"
            label="单据编号"
            min-width="140"
          />
          <el-table-column
            prop="saleAmount"
            label="销售金额"
            align="right"
            min-width="120"
          />
          <el-table-column
            prop="discountAmount"
            label="优惠金额"
            align="right"
            min-width="120"
          />
          <el-table-column
            prop="discountedAmount"
            label="优惠后金额"
            align="right"
            min-width="120"
          />
          <el-table-column
            prop="customerBearCost"
            label="客户承担费用"
            align="right"
            min-width="120"
          />
          <el-table-column
            prop="currentReceipt"
            label="本次收款"
            align="right"
            min-width="120"
          />
          <el-table-column
            prop="receivableBalance"
            label="应收款余额"
            align="right"
            min-width="120"
          />
          <el-table-column
            prop="collectionRate"
            label="回款率"
            align="right"
            min-width="100"
          />
        </el-table>
      </div>
  
      <!-- 无数据提示 -->
      <div class="no-data text-center text-gray-500 py-8" v-if="tableData.length === 0">
        <i class="el-icon-inbox"></i> 暂无数据
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'SalesReceiptList',
    data() {
      return {
        searchForm: {
          dateRange: ['2025/06/01', '2025/06/25'],
          customerType: '',
          customer: '',
          salesman: '',
          saleOrderNo: '',
          checkBoxGroup: ['显示小计']
        },
        customerTypeOptions: [
          { label: '企业客户', value: 'enterprise' },
          { label: '个人客户', value: 'personal' },
          { label: '代理商', value: 'agent' }
        ],
        tableData: [],
        summaryFields: [
          'saleAmount',
          'discountAmount',
          'discountedAmount',
          'customerBearCost',
          'currentReceipt',
          'receivableBalance'
        ]
      }
    },
    methods: {
      handleQuery() {
        console.log('查询条件：', this.searchForm)
        // 模拟数据加载
        this.loading = true;
        setTimeout(() => {
          this.tableData = this.generateMockData(20);
          this.loading = false;
        }, 800);
      },
      handleExport() {
        console.log('点击导出')
        // 实际应调用导出接口
      },
      handlePrintCommand(command) {
        console.log(`执行打印操作：${command}`)
        // 实际应调用打印功能
      },
      getSummary({ columns, data }) {
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          }
          const prop = column.prop
          if (this.summaryFields.includes(prop)) {
            const values = data.map(item => Number(item[prop]))
            if (values.every(value => !isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => prev + curr, 0).toFixed(2)
            } else {
              sums[index] = '0.00'
            }
          } else if (prop === 'collectionRate') {
            sums[index] = '0%'
          } else {
            sums[index] = ''
          }
        })
        return sums
      },
      generateMockData(count) {
        const data = [];
        for (let i = 0; i < count; i++) {
          data.push({
            customerType: ['企业客户', '个人客户', '代理商'][Math.floor(Math.random() * 3)],
            customer: ['客户' + (i + 1), '公司' + (i + 1)][Math.floor(Math.random() * 2)],
            customerAddress: '北京市朝阳区' + (i + 1) + '号',
            salesman: ['张三', '李四', '王五', '赵六'][Math.floor(Math.random() * 4)],
            businessType: ['销货', '退货'][Math.floor(Math.random() * 2)],
            receiptDate: '2025/06/' + (Math.floor(Math.random() * 25) + 1).toString().padStart(2, '0'),
            receiptNo: 'XS-' + (10000 + i),
            saleAmount: (Math.random() * 10000).toFixed(2),
            discountAmount: (Math.random() * 500).toFixed(2),
            discountedAmount: (Math.random() * 9500).toFixed(2),
            customerBearCost: (Math.random() * 200).toFixed(2),
            currentReceipt: (Math.random() * 9000).toFixed(2),
            receivableBalance: (Math.random() * 5000).toFixed(2),
            collectionRate: (Math.random() * 100).toFixed(2) + '%'
          });
        }
        return data;
      }
    }
  }
  </script>
  
  <style scoped>
  .sales-receipt-container {
    padding: 16px;
    max-width: 1920px;
    margin: 0 auto;
  }
  
  .search-form {
    background-color: #f8f9fa;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .search-form .el-form-item {
    margin-bottom: 0;
  }
  
  .search-form .el-checkbox-group {
    display: flex;
    gap: 12px;
  }
  
  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }
  
  .table-title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
  }
  
  .table-actions {
    display: flex;
    gap: 8px;
  }
  
  .no-data {
    color: #909399;
    padding: 40px 0;
  }
  </style>    